<!--  -->
<template>
  <div v-if="Object.keys(commentinfo).length !== 0" class="comment-info">
      <div class="info-top">
          <span>用户评价</span>
          <span class="more">更多</span>
      </div>
      <div class="user-info">
          <img :src="commentinfo.user.avatar" alt="">
          <span>{{commentinfo.user.uname}}</span>
      </div>
      <div class="info-center">
          <div class="comment_info">{{commentinfo.content}}</div>
          <div>
              <span class="date-info">{{timeFilter(commentinfo.created*1000)}}</span>
              <span>{{commentinfo.style}}</span>
          </div>
      </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
    }
  },
  props:{
      commentinfo:{
          type:Object,
          default() {
              return {}
          }
      }
  },
  methods:{
    timeFilter (time = +new Date()) {
        const date = new Date(time + 8 * 3600 * 1000);
        return date.toJSON().substr(0, 19).replace('T', ' ');
}

  }
}
</script>

<style  scoped>
    .comment-info{
        padding: 0 20px 20px 20px;
        border-bottom: 5px solid #f2f5f8;
    }
    .info-top{
        position: relative;
        height: 50px;
        line-height: 50px;
        font-size: 13px;
        color: #333;
        border-bottom: 1px solid #ccc;
    }
    .more {
        position: absolute;
        right: 12px;
    }
    .more::after{
        content: '';
        position: absolute;
        top: 18px;
        right: -18px;
        width: 13px;
        height: 13px;
        border-right: 1px solid #222;
        border-bottom: 1px solid #222;
        transform: rotate(315deg);
    }
    .user-info {
        height: 60px;
        line-height: 60px;
        padding: 15px 0;
    }
    .user-info img {
        width: 35px;
        height: 35px;
        vertical-align: middle;
        margin-right: 10px;
    }
    .info-center {
        font-size: 12px;
        color: #ccc;
    }
    .comment_info{
        padding: 10px 0;
        
    }
    .date-info{
        margin-right: 5px;
    }
</style>
